<template>
    <view class="pointsMore">
        <view class="title">
            <view class="point_box"> <text class="title-p">我的积分：{{myPoints}}</text></view>
<!--            <view class="shopCar_box" @tap="goShopCar()"><image class="shop_car" :src="img_url+'static/img/shopCar.png'"/></view>-->
        </view>
        <view class="box_tap">
            <view @tap="changeSelected($event)" data-pic="pic_1">
                <view><image  :src="selected_pic==='pic_1'?'../../static/img/point_in.png':'../../static/img/point_out.png'"/></view>
                <view :class="selected_pic==='pic_1'?'selected_color':''">积分商城</view>
            </view>
            <view @tap="changeSelected($event)" data-pic="pic_2">
                <view><image  :src="selected_pic==='pic_2'?'../../static/img/change_in.png':'../../static/img/change_out.png'"/></view>
                <view :class="selected_pic==='pic_2'?'selected_color':''">兑换记录</view>
            </view>
            <view @tap="changeSelected($event)" data-pic="pic_3">
                <view><image  :src="selected_pic==='pic_3'?'../../static/img/point_detail_in.png':'../../static/img/point_detail_out.png'"/></view>
                <view :class="selected_pic==='pic_3'?'selected_color':''">积分明细</view>
            </view>
            <view @tap="changeSelected($event)" data-pic="pic_4">
                <view><image  :src="selected_pic==='pic_4'?'../../static/img/huazhuan_in.png':'../../static/img/huazhuan_out.png'"/></view>
                <view :class="selected_pic==='pic_4'?'selected_color':''">划转积分</view>
            </view>
        </view>
        <view class="shop_list" v-if="selected_pic==='pic_1'">
            <view class="search_box">
                <view class="search_input_box">
                    <view class="input_field"><input class="input_field_text" type="text" placeholder="请输入商品名称" :value="params.word"  maxlength="25" @input="wordInput($event)"/></view>
                    <view class="point_search">
                        <view class="point_1"><p>积分区间:</p></view>
                        <view class="point_2"><input class="point_2_text" type="number" min="1" placeholder="最小值"   :value="params.small_integral" @input="minInput($event)"  maxlength="8"/></view>
                        <view class="arrow"></view>
                        <view  class="point_3"><input class="point_3_text" type="number" min="1" placeholder="最大值"  :value="params.big_integral"  maxlength="8" @input="maxInput($event)"/></view>
                    </view>
                </view>
                <view class="search" @tap="getRefreshList">
                    <p class="search_text">搜索</p>
                </view>
            </view>

            <view class="goods_list_box">
                <view class="goods_list">
                    <view class="goods_detail" v-for="(item,index) in goods_list" :key="index" :data-goods="item.id"  >
                        <view @tap="handleGoodsDetail(item)"><image class="goods_pic" :src="item.image"/></view>
                        <view class="detail_box">
                            <view class="goods_name">{{item.name}}</view>
                            <view class="goods_storage">库存:{{item.number}}</view>
                        </view>
                        <view class="fenge">{{item.company_name}}</view>
                        <view class="point_number">{{item.integral}}分</view>
                        <view class="goods_button" :data-goods="item.id" @tap="goNext(item)">
                            <van-button type="info" block round color="#FF9900">兑换</van-button>
                        </view>
                    </view>
                </view>
            </view>
            <m-bottom></m-bottom>

        </view>
        <view class="change_list" v-if="selected_pic==='pic_2'">
            <view v-if="exchangList.length===0">
                <MnoData></MnoData>
            </view>

            <view v-else>
                <MchangeList :list="exchangList"></MchangeList>
                <m-bottom></m-bottom>
            </view>

        </view>
        <view class="points_list" v-if="selected_pic==='pic_3'">

            <view v-if="dataList.length===0">
                <MnoData></MnoData>
            </view>

            <view v-else>
                <pointList :detailList="dataList"></pointList>
                <m-bottom></m-bottom>
            </view>
        </view>
        <view class="huazhuan_list" v-if="selected_pic==='pic_4'">
            <view class="huazhuan_box">
                <view class="huazhuan_money_title">转换金额</view>
                <view class="huazhuan_money"><input class="huazhuan_money_input"  focus v-model="huazhuan_params.money"  @input="replaceInput"   type="number" placeholder="请输入转换金额"/></view>
                <view class="huazhuan_tips">*转换比例为1:{{huazhuan_params.bili}}</view>
                <view class="huazhuan_point_title">积分</view>
                <view class="huazhuan_point"><input class="huazhuan_point_input" v-model="huazhuan_params.point"  disabled=true type="number" placeholder="转换所得积分"/></view>
                <view class="huazhuan_button">
                    <button type="primary" class="huazhuan_button_self" @tap="huaZhuanQuery()" >确认兑换</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import MchangeList from '@/components/m-changeList';
    import pointList from '@/components/m-pointList';
    import MnoData from '@/components/m-noData.vue'
    export default{
        name:"pointsMore",
        data(){
            return{
                myPoints:0,
                selected_pic:'pic_1',
                params:{
                    word:'',
                    small_integral:'',
                    big_integral:'',
                    page:1,
                    is_load:0,
                },
                exchange_params:{
                    page:1,
                    is_load:0,
                },
                datalist_params:{
                    page:1,
                    is_load:0,
                },
                huazhuan_params:{
                    money:'',
                    point:'',
                    bili:'1',
                },
                goods_list:[],
                exchangList:[],
                dataList:[],
                select_num:1,
                img_url:this.$mConfig.assetsPath


            }
        },
        onShow: function() {},

        onReachBottom() {  //分页加载请求数据
            if(this.selected_pic==='pic_1'){
                if(this.params.is_load>0){
                    this.getGoodsList()
                }else{
                    uni.showToast({
                        title:"没有更多数据啦",
                        icon:"",
                    })
                }
            }
            if(this.selected_pic==='pic_2'){
                if(this.exchange_params.is_load>0){
                    this.getGoodsList()
                }else{
                    uni.showToast({
                        title:"没有更多数据啦",
                        icon:"none",
                    })
                }
            }
            if(this.selected_pic==='pic_3'){
                if(this.datalist_params.is_load>0){
                    this.integralDataList()
                }else{
                    uni.showToast({
                        title:"没有更多数据啦",
                        icon:"none",
                    })
                }
            }


        },
        async mounted(){
            await this.getGoodsList() // 获取商品列表
            let resData= await this.$apis.getUserInfo({access_token:''})
            if(resData.code===0){
                let user_info =resData.data
                this.myPoints=user_info.integral_num
            }



        },
        methods:{
            changeSelected(event){   // 点击切换tab
               if(this.selected_pic===event.currentTarget.dataset.pic){
                   return
               }else{
                   if(event.currentTarget.dataset.pic==='pic_1'){ //积分商品列表
                       if(this.goods_list.length===0){
                           this.getGoodsList()
                       }
                   }
                   if(event.currentTarget.dataset.pic==='pic_2'){ //兑换记录列表
                       if(this.exchangList.length===0){
                           this.exchangeProductList()
                       }
                   }
                   if(event.currentTarget.dataset.pic==='pic_3'){ //积分记录列表
                       if(this.dataList.length===0) {
                           this.integralDataList()
                       }
                   }
                   if(event.currentTarget.dataset.pic==='pic_4'){ // 积分兑换

                   }
                   this.selected_pic=event.currentTarget.dataset.pic
               }
            },
            changeHuaZhuanPoint(event){  //设置输入金额后计算相应的积分
                let reg=/^[1-9]\d*$/
                if(!reg.test(event.detail.value)){
                    uni.showToast({
                        title: '请输入正确的金额',
                        icon:"none",
                        duration: 1000
                    });
                    this.huazhuan_params.money=''
                }else{
                    this.huazhuan_params.money=event.detail.value
                    this.huazhuan_params.point=this.huazhuan_params.bili*parseFloat(event.detail.value)
                }

            },
            replaceInput: function(event) {
                let reg=/^[1-9]\d*$/
                if(!reg.test(event.detail.value)){
                    uni.showToast({
                        title: '请输入正确的金额',
                        icon:"none",
                        duration: 1000
                    });
                    this.huazhuan_params.money=''
                    this.huazhuan_params.point=''
                }else{
                    this.huazhuan_params.money=event.detail.value
                    this.huazhuan_params.point=this.huazhuan_params.bili*parseInt(event.detail.value)
                }
            },
            async huaZhuanQuery(){ // 提交划转金额
                if(this.huazhuan_params.money!==''){
                    uni.showLoading({})
                    let res=await  this.$apis.priceConversionIntegral({price:this.huazhuan_params.money})
                    if(res.code===0){
                        let user_data = await this.$apis.getUserInfo({access_token:''})
                        if(user_data.code===0){
                            this.$store.commit("SET_USERINFO",user_data.data)
                        }
                    }
                    uni.showToast({
                        title: '操作成功',
                        duration: 1000,
                    });
                    setTimeout(()=>{
                        uni.reLaunch({
                            url: '/pages/home/pointsMore'
                        })
                    },1000)
                    uni.hideLoading()

                }else{
                    let reg=/^[1-9]\d*$/
                    if(!reg.test(this.huazhuan_params.money)){
                        uni.showToast({
                            title: '请输入正确的金额',
                            icon:"none",
                            duration: 1000
                        });
                        this.huazhuan_params.money=''
                        return
                    }
                    uni.showToast({
                        title: '金额不能为空',
                        icon:'none',
                        duration: 1000
                    });
                }

            },
            async getGoodsList(){
                uni.showLoading({})
                let resData=await this.$apis.getIntegralProductList(this.params)
                this.goods_list.push(...resData.data.lists)
                this.params.is_load=resData.data.is_load
                this.params.page++
                uni.hideLoading()
            },
            async getRefreshList(){
                uni.showLoading({})
                this.params.page=1
                this.params.is_load=0
                this.goods_list=[]
                console.log(this.params)
                let resData=await this.$apis.getIntegralProductList(this.params)
                this.goods_list.push(...resData.data.lists)
                this.is_load=resData.data.is_load
                uni.hideLoading()
            },
            wordInput(event){
                this.params.word=event.detail.value
            },
            minInput(event){
                this.params.small_integral=event.detail.value
            },
            maxInput(event){
                this.params.big_integral=event.detail.value
            },
            async exchangeProductList(){
                uni.showLoading({})
                let resData=await this.$apis.exchangeProductList(this.exchange_params)
                this.exchangList.push(...resData.data.lists)
                this.exchange_params.is_load=resData.data.is_load
                this.exchange_params.page++
                uni.hideLoading()
            },

            async integralDataList(){
                uni.showLoading({})
                let resData=await this.$apis.integralRecord(this.datalist_params)
                this.dataList.push(...resData.data.lists)
                this.datalist_params.is_load=resData.data.is_load
                this.datalist_params.page++
                uni.hideLoading()
            },
            handleGoodsDetail(item){
                this.$router.push({
                    route:this.$routesConfig.goodsDetail,
                    query:{id:item.id}
                })
            },
            goNext(item){
                this.$router.push({
                    route:this.$routesConfig.sureChange,
                    query:{goods_id:item.id,
                        num:this.select_num,
                        goods_name:item.name,
                        goods_point:item.integral,
                        image:item.image
                    }
                })
            },
            goShopCar(){
                this.$router.push({
                    route:this.$routesConfig.shopCar,
                })
            }
        },
        components:{
            MchangeList,
            pointList,
            MnoData
        }
    }
</script>

<style lang="less">
 .title{
     font-size: 35rpx;
     text-align: left;
     color: #f1a12d;
     margin-top: 20rpx;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
 .title-p{
     width: 100%;
     margin-left: 10%;
     display: block;
     /*box-shadow: 0rpx 0rpx 2rpx #999999;*/
     /*border:0.5px solid #ffffff;*/
     border-radius: 20px;
 }
 .box_tap{
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     margin-top: 50rpx;
     font-size: 26rpx;
     text-align: center;
     color: black;
 }
 .selected_color{
     color: #f1a12d;
 }
    image{
        width: 45rpx;
        height: 45rpx;
    }
    .search{
        position: relative;
        top:20rpx;
        left: -80rpx;
        width: 70rpx;
        height: 70rpx;
        background-image: url("../../static/img/search.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .search_box{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 25rpx;
    }
    .search_input_box{
        width: 250px;
    }
    .input_field{
        margin-top: 23rpx;
        /*border: #555555 solid 1px;*/
        box-shadow: 0rpx 0rpx 5rpx #999999;
        font-size: 25rpx;
        margin-left: 44rpx;
        border-radius: 5px;
    }

    .point_search{
        display: flex;
        flex-direction: row;
        margin-left: 44rpx;
        margin-top: 15rpx;
    }
    .point_1{
        font-size: 25rpx;
        width: 120rpx;
        padding-top: 10rpx;
    }

     .point_2{
         width: 140rpx;
         /*border: #555555 solid 1px;*/
         box-shadow: 0rpx 0rpx 5rpx #999999;
         font-size: 25rpx;
         border-radius: 5px;
     }

     .arrow{
         width: 40rpx;
         height: 40rpx;
         margin-left: 10rpx;
         margin-right: 10rpx;
         background-image: url("../../static/img/arrow.png");
         background-size: 100%;
         background-repeat: no-repeat;
     }
     .point_3{
         width: 140rpx;
         /*border: #555555 solid 1px;*/
         box-shadow: 0rpx 0rpx 5rpx #999999;
         font-size: 25rpx;
         border-radius: 5px;
     }
    .search_text{
        font-size: 25rpx;
        position: relative;
        top: 78rpx;
        left: 8rpx;
    }
    .goods_list{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 20rpx;
    }
    .goods_pic{
        width: 285rpx;
        height: 200rpx;
    }
    .detail_box{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .goods_name{
        width: 180rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
        font-size: 28rpx;
    }
    .goods_storage{
        width: 100rpx;
        color: #999999;
        font-size: 20rpx;
        padding-top: 5rpx;
    }
    .point_number{
        font-size: 28rpx;
        color: #f1a12d;
        margin-top: 15rpx;
    }
    .goods_button{
        margin-top: 15rpx;
    }
    .goods_detail{
        margin-top: 30rpx;
        width: 290rpx;
        margin-bottom: 25rpx;
    }
  /*添加伪类，使最后一行左对齐 */
 .goods_list:after {
     content: "";
     /*这个宽度和子元素宽度一致*/
     width: 290rpx;
     height: 0;
     display: block;
 }
  .van-button{
        height: auto!important;
    }
    .huazhuan_box{
        width: 66%;
        margin-left: 17%;
    }
    .huazhuan_money{
        margin-top: 20rpx;
        border: solid 0.5px #dddddd;
    }
    .huazhuan_money_title{
        margin-top: 50rpx;
    }
    .huazhuan_money_input{
        font-size: 30rpx;
        height: 72rpx;
    }
    .huazhuan_point{
        margin-top: 20rpx;
        border: solid 0.5px #dddddd;
    }
    .huazhuan_point_input{
        font-size: 30rpx;
        height: 72rpx;
    }
    .huazhuan_tips{
        margin-top: 20rpx;
        font-size: 22rpx;
        color:#f1a12d ;
    }
    .huazhuan_point_title{
        margin-top: 20rpx;
    }
    .huazhuan_button{
        margin-top: 100rpx;
    }
    .huazhuan_button_self{
        font-size: 30rpx;
        width: 200rpx;
        background-color:#FF9502 !important;
    }
    .point_box{
        width: 60%;
    }
    .shopCar_box{
        margin-right: 65rpx;
    }
    .fenge{
        color: #868585;
        font-size: 26rpx;
    }


</style>

